<template>
    <div class="app-container">
        <el-card class="title-container" shadow="never">
            <div>
                <el-row>
                    <i class="el-icon-search"></i>
                    <span>店铺总览</span>
                </el-row>
                <el-row type="flex" justify="space-around" style="margin-top:12px;">
                    <div class="avatar-content">
                        <p>待结算</p>
                        <p>{{ formatMoney(yetSettle) }}</p>
                    </div>
                    <div class="avatar-content">
                        <p>总可提现利润</p>
                        <p>{{ formatMoney(withdrawable) }}</p>
                    </div>
                    <div class="avatar-content">
                        <p>已提现</p>
                        <p>{{ formatMoney(withdrawn) }}</p>
                    </div>
                </el-row>
            </div>
        </el-card>
        <el-card class="filter-container" shadow="never">
            <div>
                <el-row>
                    <i class="el-icon-search"></i>
                    <span>团长明细</span>
                </el-row>
                <el-row style="margin-top:12px;">
                    <el-input
                        style="width:400px;"
                        clearable
                        size="small"
                        placeholder="团长名称／社区店／名字／手机号码"
                        suffix-icon="el-icon-search"
                        v-model="queryCondition"
                    >
                    </el-input>
                    <el-date-picker
                        v-model="startTime"
                        style="margin-left: 10px;"
                        size="small"
                        align="right"
                        type="date"
                        placeholder="开始时间"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                    <el-button
                        style="margin-left: 10px;"
                        @click="handleSearchCaptainList()"
                        type="primary"
                        size="small"
                    >
                        查询
                    </el-button>
                    <el-button @click="handleResetCaptainSearch()" size="small">
                        重置
                    </el-button>
                </el-row>
            </div>
        </el-card>
        <div class="table-container">
            <el-table
                ref="captainListTable"
                :data="captainDataList"
                style="width: 100%"
                v-loading="listLoading"
                border
            >
                <el-table-column label="团长信息" align="center">
                    <template slot-scope="scope"
                        >{{ scope.row.headName }}
                        <span style="display:block">{{ scope.row.phoneNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="社区店名称" align="center">
                    <template slot-scope="scope">{{ scope.row.communityName }}</template>
                </el-table-column>
                <el-table-column label="待结算利润" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showModalTable('tocharge')"
                            >￥{{ formatMoney(scope.row.yetSettle) }}</el-button
                        >
                        <to-charge-modal ref="tocharge" :id="scope.row.id"> </to-charge-modal>
                    </template>
                </el-table-column>
                <el-table-column label="账户余额" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showModalTable('account')"
                            >￥{{ formatMoney(scope.row.withdrawable) }}</el-button
                        >
                        <account-balance-modal ref="account" :id="scope.row.id">
                        </account-balance-modal>
                    </template>
                </el-table-column>
                <el-table-column label="佣金总额" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="showModalTable('profit')"
                            >￥{{
                                formatMoney(
                                    scope.row.withdrawn +
                                        scope.row.withdrawable +
                                        scope.row.yetSettle
                                )
                            }}</el-button
                        >
                        <profit-total-modal ref="profit" :id="scope.row.id"> </profit-total-modal>
                    </template>
                </el-table-column>
                <el-table-column label="最近提现时间" align="center">
                    <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :page-size="listQuery.pageSize"
                :page-sizes="[5, 10, 15]"
                :current-page.sync="listQuery.pageNum"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import ToChargeModal from './ToChargeModal';
import ProfitTotalModal from './ProfitTotalModal';
import AccountBalanceModal from './AccountBalanceModal';
import { commisionQueryList, commisionSumary, commisionYetSettle } from '@/api/captain';
import { formatDate } from '@/utils/date';
import { formatMoney } from '@/utils/goods';
const defaultListQuery = {
    pageNum: 1,
    pageSize: 5
};
export default {
    name: 'productList',
    data() {
        return {
            queryCondition: '',
            yetSettle: 0,
            withdrawable: 0,
            withdrawn: 0,
            startTime: null,
            captainDataList: [],
            listLoading: false,
            listQuery: Object.assign({}, defaultListQuery),
            total: null,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            }
        };
    },
    components: {
        ToChargeModal,
        ProfitTotalModal,
        AccountBalanceModal
    },
    created() {
        this.getCaptainList();
        this.getSummaryData();
    },
    watch: {},
    filters: {},
    methods: {
        getCaptainList(queryData) {
            queryData = queryData ? queryData : this.listQuery;
            commisionQueryList(queryData).then(res => {
                if (res.data.success == true) {
                    this.captainDataList = res.data.data;
                } else {
                    this.captainDataList = [];
                    this.$message.error(res.data.msg);
                }
            });
        },
        getSummaryData() {
            commisionSumary().then(res => {
                if (res.data.success == true) {
                    res = res.data;
                    this.yetSettle = res.data.yetSettle;
                    this.withdrawable = res.data.withdrawable;
                    this.withdrawn = res.data.withdrawn;
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        handleSearchCaptainList() {
            let queryData = {};
            if (this.queryCondition) {
                queryData['queryCondition'] = this.queryCondition;
            }
            if (this.startTime) {
                queryData['startTime'] = formatDate(this.startTime, 'yyyy-MM-dd hh:mm:ss');
            }
            this.getCaptainList({ ...this.listQuery, ...queryData });
        },
        handleResetCaptainSearch() {},
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getCaptainList();
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getCaptainList();
        },
        handleEditCaptain() {},
        handleBackCaptain() {},
        handleViewCaptainOrders() {},
        formatMoney(val) {
            return formatMoney(val);
        },
        showModalTable(key) {
            this.$refs[key].dialogTableVisible = true;
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container .title-container {
    margin-bottom: 20px;
}

.avatar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    p {
        text-align: center;
        margin-top: 0;
        &:nth-child(2) {
            color: #f56c6c;
        }
    }
}
</style>
